<template>
  <div class="app-container">
    <h1>任务进度跟踪</h1>

    <!-- 查询表单 -->
    <el-card class="query-form-card">
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-row :gutter="8">
          <el-col :span="4">
            <el-form-item label="任务名称">
              <el-input v-model="queryForm.name" placeholder="任务名称" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="负责人">
              <el-input v-model="queryForm.assignee" placeholder="负责人" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="果园信息">
              <el-input v-model="queryForm.orchardInfo" placeholder="果园信息" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="创建时间">
              <el-date-picker v-model="queryForm.createdAt" type="date" placeholder="选择日期" size="small"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态">
              <el-select v-model="queryForm.status" placeholder="请选择状态" size="small" style="width: 100%;">
                <el-option label="" value="">选择下列选项</el-option>
                <el-option label="待分配" value="待分配"></el-option>
                <el-option label="进行中" value="进行中"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
                <el-option label="已取消" value="已取消"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 任务表格 -->
      <el-card class="task-table-card">
        <el-table :data="tasks" style="width: 100%" :row-class-name="tableRowClassName" stripe border highlight-current-row
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @current-change="handleCurrentChange"
          height="800" class="task-table">
          <el-table-column prop="name" label="任务名称" width="150"></el-table-column>
          <el-table-column prop="description" label="任务描述" :min-width="180" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createdAt" label="创建时间" width="150"></el-table-column>
          <el-table-column prop="endDate" label="终止时间" width="155"></el-table-column>
          <el-table-column prop="orchardInfo" label="果园信息"  width="150"></el-table-column>
          <el-table-column prop="materialsTools" label="物资工具"  width="150"></el-table-column>
          <el-table-column label="人员" :min-width="120" show-overflow-tooltip>
            <!-- 使用 template 和 slot-scope 来自定义列的内容 -->
            <template slot-scope="scope">
              {{ scope.row.assignees.join('、') }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleUpdateStatus(scope.row)"
                style="background-color: #409eff; color: #f0f2f5;">更新状态</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 更新状态对话框 -->
      <el-dialog title="更新任务状态" :visible.sync="dialogVisible" width="30%" class="status-dialog">
        <el-form :model="statusForm" label-width="100px" class="form">
          <el-form-item label="任务名称">
            <el-input v-model="statusForm.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="当前状态">
            <el-select v-model="statusForm.status" placeholder="请选择状态" class="select-status">
              <el-option label="待处理" value="待处理"></el-option>
              <el-option label="进行中" value="进行中"></el-option>
              <el-option label="已完成" value="已完成"></el-option>
              <el-option label="已取消" value="已取消"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="toggleDialog(false)">取 消</el-button>
          <el-button type="primary" @click="confirmUpdateStatus">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      queryForm: {
        name: '',
        assignee: '',
        orchardInfo: '',
        createdAt: '',
        status: ''
      },
      dialogVisible: false,
      statusForm: {
        id: null,
        name: '',
        status: ''
      }
    };
  },
  computed: {
    ...mapState('task', ['tasks'])
  },
  methods: {
    ...mapActions('task', ['fetchTasks', 'updateTaskStatus']),

    handleQuery() {
      this.fetchTasks(this.queryForm); // 调用Vuex action并传递查询表单数据
    },

    handleUpdateStatus(row) {
      this.statusForm = { ...this.statusForm, ...row }; // 使用扩展运算符合并对象
      this.dialogVisible = true;
    },

    confirmUpdateStatus() {
      const { id, status } = this.statusForm;

      if (!id || !status) {
        console.error('任务ID或状态为空:', this.statusForm);
        this.$message.error('任务ID或状态为空');
        return;
      }

      this.updateTaskStatus({ id, status }).then(() => {
        this.dialogVisible = false; // 关闭对话框
        this.fetchTasks(); // 刷新任务列表
        this.resetStatusForm(); // 成功更新后重置 statusForm
      }).catch((error) => {
        console.error('更新状态失败:', error);
      });
    },
    resetStatusForm() {
      this.statusForm = {
        id: null,
        name: '',
        status: ''
      };
    },
    toggleDialog(visible) {
      this.dialogVisible = visible;
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }
  },
  created() {
    // 组件创建时加载任务数据
    this.fetchTasks();
  }
};
</script>

<style scoped>
/* 可以在这里添加额外的样式 */
.status-dialog .form {
  margin-bottom: 20px;
}
.select-status {
  width: 100%;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
/* 可以在这里添加额外的样式 */
.status-dialog .form {
  margin-bottom: 20px;
}

.select-status {
  width: 100%;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}</style>
<style scoped>
.app-container {
  padding: 5px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

h1 {
  text-align: center;
  color: #303133;
  margin-bottom: 20px;
}

.el-card__body {
    padding: 15px;
}
.query-form-card {
  width: 95%;
  /* 调整宽度 */
  margin: 0 auto 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  padding: 0px;
  /* 减少内边距 */
}

.query-form .el-form-item {
  margin-bottom: 0;
  /* 移除默认间距 */
}

.el-row {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
}

.el-col {
  display: flex;
  align-items: center;
  /* 确保子元素垂直居中 */
}

.task-table-card {
  margin: 20px auto;
  max-width: 1200px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.task-table {
  margin: 0 auto;
  max-width: 1200px;
  transition: all 0.3s ease;
}

.el-table th,
.el-table td {
  text-align: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.status-dialog {
  border-radius: 12px;
}


.form {
  padding: 0 20px;
}

.select-status {
  width: 100%;
}

.el-dialog__header {
  background-color: #ecf5ff;
  border-bottom: 1px solid #dfe6ec;
  padding: 16px 20px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.el-dialog__body {
  padding: 5px;
}

.el-dialog__footer {
  border-top: 1px solid #dfe6ec;
  padding: 10px 20px;
  text-align: right;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.warning-row {
  background: oldlace;
}

.success-row {
  background: #f0f9eb;
}

@media (max-width: 768px) {
  .query-form {
    flex-direction: column;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .el-table {
    font-size: 14px;
  }
}</style>